<template>
  <div id="z">
    <van-nav-bar left-text="会员码" left-arrow @click-left="onClickLeft" />
    <div class="bcc" v-if="!islogin">
      <img src="../assets/21.png" name="touxiang" />
      <span>个人昵称<a href=""></a></span>
    </div>
    <div class="bcc" v-else>
      <img :src='`http://localhost:3000/avatar/${img}`' name="touxiang" />
      <span>{{uname}}</span>
    </div>
    <div id="s">
      <p>当前积分</p>
      <h1>{{num}}</h1>
      <button :disabled="dis" :class="{disabled:dis}" @click="btn">立即签到</button>
    </div>   
    <div id="calendar">
      <van-calendar
        title="已连续签到0天"
        color="#99CC00"          
        row-height="45"  
        :show-subtitle="false"
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '320px' }"
      />
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  data() {
    return {
      dis: false,
      num:0
    }
  },
  computed: {
    ...mapState(['uname','islogin','img'])
  },
  methods: {
     ...mapMutations(['updateUname','updateImg']),
     onClickLeft(){
      this.$router.push("/me")
    },
    btn() {
       this.num+=1   
        this.dis=true
        setTimeout(() => {
          this.$router.push("already");
        }, 2000);           
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#z {
  min-height: 100vh;
  background-color: rgb(243, 241, 241);
}
::v-deep .van-nav-bar__text {
  color: black;
  font-size: 15px;
  margin: 0.5vh 0 0 2vh;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
.bcc {
  background-color: #a7d500;
  height: 18vh;
  display: flex;
}
.bcc img {
  border-radius: 50%;
  width: 7vh;
  height: 7vh;
  margin-top: 3vh;
  margin-left: 2vh;
}
.bcc span {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-top: 5vh;
  margin-left: 3vh;
}
#s {
  position: relative;
  border: 1px solid gainsboro;
  border-radius: 8px;
  top: -8vh;
  margin: 2vh 2vh;
  background-color: white;
  box-shadow: 2px 2px gainsboro;
  padding: 4vh 0;
}
#s h1{
  font-size: 32px;
}
#s p {
  font-size: 14px;
  margin-bottom: 1vh;
}
#s button {
  background-color: #a7d500;
  color: white;
  padding: 1vh 10vh;
  border-radius: 5vh;
  border: 0;
  margin-top: 4vh;
}
#calendar{
  margin: 2vh;
  position: relative;
  top: -8vh;
}
.disabled {
  background: #e0e0e0 !important;
}
</style>